<template>
	<onez-view class="onez-user">
		<template v-if="info">
			<slot :info="info"></slot>
		</template>
	</onez-view>
</template>
<script>
	import onezView from '../../components/onez-view/onez-view.vue'
	export default {
		name: "onez-user",
		components: {
			onezView
		},
		props: {
			userid: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				info: null
			};
		},
		mounted() {
			this.init();
		},
		destroyed() {

		},
		methods: {
			async init() {
				if (this.$game.users) {
					if (this.$game.users[this.userid]) {
						this.info = this.$game.users[this.userid];
						return;
					}
				}
				this.info = {
					avatar: await this.$game.hook(this, 'static', {
						file: '/images/ui/avatar.png'
					}),
					sex: 'girl',
					userid: this.userid,
					nickname: this.userid,
				};
				var r = await this.$game.hook(this, 'user', {
					userid: this.userid
				});
				if (r && r.userid) {
					this.info = r;
					if (!this.$game.users) {
						this.$game.users = {};
					}
					this.$game.users[this.userid] = r;
				}
			}
		}
	}
</script>
<style scoped>
	.onez-text {
		position: relative;
	}

	.onez-text div {
		transform-origin: 50% 50%;

	}

	.onez-text .back {
		position: relative;
		z-index: 1;
		font-weight: bold;
	}

	.onez-text .front {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
	}
</style>